<template>
  <div>
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goods_id"
      :quota="quota"
      :quota-used="quotaUsed"
      :hide-stock="sku.hide_stock"
      show-add-cart-btn
      reset-stepper-on-hide
      :initial-sku="initialSku"
      @buy-clicked="onBuyClicked"
      ref="getSku"
    >
      <!--  @add-cart="onAddCartClickeds" -->
      <!-- 自定义 sku-header-price -->

      <template #sku-header-price="props">
        <div class="van-sku__goods-price">
          <span class="van-sku__price-symbol">￥</span
          ><span class="van-sku__price-num">{{ props.price }}</span>
        </div>
      </template>

      <!-- 自定义 sku actions -->
      <template #sku-actions="props">
        <div class="van-sku-actions" v-if="!qding">
          <!-- @click="onPointClicked" -->
          <van-button
            square
            size="large"
            v-if="ifShopping[0].state"
            type="warning"
            @click="onAddCartClickeds"
          >
            {{ ifShopping[0].title }}
          </van-button>
          <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
          <van-button
            v-if="ifShopping[1].state"
            square
            size="large"
            type="danger"
            @click="props.skuEventBus.$emit('sku:buy')"
          >
            {{ ifShopping[1].title }}
          </van-button>
        </div>
      </template>
    </van-sku>
  </div>
  <!-- 配置项暂时关闭  :message-config="messageConfig" -->
</template>

<script>
import { Toast } from "vant";
import API from "../../http/API";
import eventVue from "../../assets/zizhujian/index";
import { Sku } from "vant";
import { Button } from "vant";
export default {
  name: "guger",
  inject: ["reload"],
  props: ["specification"],
  // inject: ["reload"],
  components: {
    [Sku.name]: Sku,
    [Toast.name]: Toast,
    [Button.name]: Button,
  },
  watch: {
    // 物品栏
    specification(val) {
      this.specificationData = val;
      console.log(val);
      // this.show = val[val.length - 1].show;

      // 商品的数量

      // 商品id
      this.goods_id = val[0].goodsId;
      this.goods.picture = val[0].url;
      console.log(this.sku);

      this.sku.price = val[0].price;

      // val.pop();
      console.log(val.length);
      // 进行更改数据表
      this.mans(val);
    },
    // 显示隐藏
  },
  data() {
    return {
      // 在购物车页面让他显示的确定按钮
      qding: false,
      // 先然他进行判断是不是在购物车页面
      // 如果是的话就把字体改成确定让它选择规格
      // 添加购物车设置为隐藏
      ifShopping: [
        //第一个韦添加购物车
        {
          // 字体
          state: true,
          title: "加入购物车",
        },
        // 第二个为确定购买
        { state: true, title: "立即购买" },
      ],
      // 购买按钮
      //购物车id
      shoppingID: 0,
      show: false,
      specificationData: [],
      // 先设置为0

      quota: 0,
      quotaUsed: 0,
      initialSku: {
        //默认选中
        s1: "",

        selectedNum: this.specification.shuliang,
      },
      customSkuValidator: () => "请选择xxx!",

      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [],
        // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
        list: [],
        price: "", //？？
        stock_num: 227, // 商品总库存？？
        none_sku: false, // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
        hide_stock: false, // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
      },
      goods_id: "",
      // quota: 3, //限购数量 库存旁边显示限购数
      // quota_used: 0, //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
      goods_info: {
        title: "测试商品A",
        picture:
          "https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg", //图片这个我有点混乱
      },

      showBase: true, //sku的框的显示
      showCustom: false,
      showStepper: false,
      showSoldout: false,
      closeOnClickOverlay: true, //点击空白处关闭购物框

      customSkuValidator: () => "请选择xxx!",
      goods: {
        // 默认商品 sku 缩略图
        picture: "https://img01.yzcdn.cn/1.jpg",
      },
    };
  },
  created: function () {
    this.show = false;
    console.log("走了生命周期了");
    this.abtn();
    this.myroute();

    // this.reload()
  },

  methods: {
    // 拿路由进行判断是不是在购物车玉米面
    myroute() {
      let rott = this.$route.name;
      if (rott == "shopping") {
        this.ifShopping[0].state = false;
        this.ifShopping[1].title = "确定";
      }
    },

    abtn: function () {
      eventVue.$on("myFun", (message) => {
        //这里最好用箭头函数，不然this指向有问题
        // this.btext = message;
        // console.log()
        this.$nextTick(() => {
          this.show = message;
          this.$forceUpdate();
        });

        // console.log(message);
      });
    },
    // 确定购买按钮
    onBuyClicked: function (e) {
      // console.log(e);
      // 如果页面在购物车页面不让它跳入购买页面并且让确定购买变成确定
      let rott = this.$route.name;
      if (rott == "shopping") {
        // console.log(e);
        // console.log("确定界面");
        let id = this.$store.state.shoppingID;
        // console.log(id);
        // console.log(e.selectedSkuComb.id);
        this.$post(API.POST_CART_UPDATE, {
          //        ①封装 token
          // ②productId: 当前商品指定规格的商品 ID,
          // ③goodsId: 当前商品 ID,
          // ④number: 商品数量,
          // ⑤id: 购物车 Id
          token: localStorage.getItem("token"),
          productId: e.selectedSkuComb.id,
          goodsId: e.goodsId,
          number: e.selectedNum,
          id: id,
        }).then((res) => {
          if (res.errmsg == "成功") {
            this.reload();
            Toast({
              message: "加入购物车成功",
              position: "top",
            });
            this.gwc();
            this.gowuc();
          }
          console.log(res);
        });
      } else {
        // 在购买页面进行购买的
        this.fastadd(e);
      }
    },

    // 点击购买的时候发起网络请求
    // cart/fastadd', // 点击立即购买商品缓存购买信息
    // 请求方式：post
    // 参数：
    // ①封装 token
    // ②goodsId:当前商品 ID
    // ③number：商品数量
    // ④productId：当前商品指定规格的商品 ID
    fastadd(e) {
      console.log(e);
      this.$post(API.POST_CART_FASTADD, {
        // ①封装 token
        // ②goodsId:当前商品 ID
        // ③number：商品数量
        // ④productId：当前商品指定规格的商品 ID
        token: localStorage.getItem("token"),
        goodsId: e.goodsId,
        number: e.selectedNum,
        productId: e.selectedSkuComb.id,
      }).then((res) => {
        console.log(res);
        e.addressId = res.data;
        this.$router.push({ name: "confirm" });
        localStorage.setItem("minid", e.selectedSkuComb.goods_id);
      });
    },

    // 添加购物车
    onAddCartClickeds: function () {
      // 发起网络请求
      // console.log(this.specificationData)
      // console.log(e);

      let e = this.$refs.getSku.getSkuData();
      let a = false;
      // console.log(e);
      // if (a) {
      this.$post(API.POST_CART_ADD, {
        //             ①封装 token
        // ②goodsId:当前商品 ID
        // ③number：商品数量
        // ④productId：当前商品指定规格的商品 I
        token: localStorage.getItem("token"),
        goodsId: e.selectedSkuComb.goods_id,
        number: e.selectedNum,
        productId: e.selectedSkuComb.id,
      }).then((res) => {
        console.log(res);
        if (res.errmsg == "成功") {
          Toast({
            message: "加入购物车成功",
            position: "top",
          });

          this.gwc();

          this.mans(res);
        }
        // console.log(res);
      });
      // }
    },

    // 更改数据
    mans(val) {
      console.log(val);
      // 最多选项的是多少,来定义数组长度选项数组的下标
      let option = 0;
      let quanbu = new Array();
      // 先集合类型
      // 用来判断选择的项目
      // 先判断数据的那数据选项最大有多少项
      if (val.shuliang > 1) {
        this.$forceUpdate();
        // console.log(this.initialSku.selectedNum);
        // this.initialSku.selectedNum = val.shuliang;
        this.$set(this.initialSku, "selectedNum", val.shuliang);
        console.log(this.initialSku.selectedNum);

        //  Vue.set(this.initialSku,selectedNum, val.shuliang)
        //  this.initialSku.selectedNum=val.shuliang
      }

      for (let index = 0; index < val.length; index++) {
        // 来换取数据的最长度以免有一先数据格式是多一个选项的
        option =
          option < val[index].specifications.length
            ? val[index].specifications.length
            : option;
      }
      // 将动态数组循环进去
      for (let index = 0; index < option; index++) {
        // 来换取数据的最长度以免有一先数据格式是多一个选项的
        quanbu.push([]);
      }
      for (let index = 0; index < val.length; index++) {
        // 来换取数据的最长度以免有一先数据格式是多一个选项的
        val[index].specifications.map(function (item, i) {
          // 啊哈哈哈哈这样子我就拥有了动态生成的数组来保数据选择的选项卡了
          quanbu[i].push(item);
          // console.log(item);
          // console.log(i);
        });
      }
      // console.log(quanbu);
      // 循环调用方法去重复的
      for (let index = 0; index < quanbu.length; index++) {
        // 将数据去重复
        quanbu[index] = this.repetition(quanbu[index]);
      }
      // console.log(quanbu);

      // 赋值长度
      // this.sku.tree.count = quanbu.length;
      //正式的插入动态插入格式

      let tree = [];
      // 循环选项卡
      for (let index = 0; index < quanbu.length; index++) {
        let a = index;
        // console.log(quanbu[index]);
        tree.push({
          k: "选项" + (a + 1),
          k_id: a + 1,
          v: [],
          k_s: "s" + (a + 1),
          count: quanbu[index].length,
        });
        for (let i = 0; i < quanbu[index].length; i++) {
          tree[index].v.push({
            id: i + 1,
            name: quanbu[index][i],
          });
        }
      }
      // console.log(tree);
      // 选项列表
      // ！！！！！！！！！！！！！！！！重要环节！！！！！！！！！！！！！
      let list = [];
      let a = 0;
      let s = 0;
      let s2 = 0;
      if (tree.length == 1) {
        list.push({
          id: val[0].id,
          price: val[0].price + "0", //价格
          s1: 1,
          s2: 1,
          stock_num: val[0].number, //库存
          goods_id: val[0].goodsId,
          url: val[0].url,
          titlei: val.title,
        });
        this.sku.tree = tree;
        this.sku.list = list;
        return;
      } else {
        // 循环选项

        if (tree[0].v == undefined) {
          console.log("没有第二项");

          return;
        }

        for (let i = 0; i < tree[0].v.length; i++) {
          // console.log(tree[index].v[i]);
          // console.log(i);
          s = i + 1;

          for (let index = 0; index < tree[1].v.length; index++) {
            list.push({
              id: val[a].id,
              price: val[index].price + "0", //价格
              // discount: 122,折扣
              s1: s,
              s2: s2 + (index + 1),
              stock_num: val[a].number, //库存
              goods_id: val[a].goodsId,
              url: val[a].url,
              titlei: val.title,
            });
            // console.log(i);
            a++;
          }
        }
      }

      // console.log(a);

      this.sku.tree = tree;
      this.sku.list = list;
      // console.log(tree);
      // console.log(list);
      // console.log(this.sku);
      // console.log(tree);
    },

    //  查重复，筛选
    repetition(val) {
      let arr = val;
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i] == arr[j]) {
            //第一个等同于第二个，splice方法删除第二个
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    },
    // 加入购物车的时候重新拿

    gwc() {
      this.$get(API.GET_CART_INDEX, {
        token: this.$store.state.token,
      }).then((res) => {
        this.$store.commit("shoppingAmount", res.data.cartList.length);
        console.log("走了生命周期");

        console.log(this.$store.state.shoppingamount);
      });
    },
  },
  // 页面销毁
};
</script>

<style>
</style>